<template>
	<color-header></color-header>
	<view class="header-tab">
		<uni-nav-bar title="宠物友好" left-icon="left" status-bar background-color="transparent" :border="false">
				<template #left>
					<view class="left-title" @click="$navTo('/pages/merchant/cityList')">
						<view class="city-name">{{currentLocate}}</view>
						<image class="switch-icon" src="/static/icons/city.svg" mode=""></image>
					</view>
				</template>
		</uni-nav-bar>	
		<!-- 筛选条件 -->
		<view class="sift-wrapper">
			<view class="sift-item" @click="siftClick(1)">
				<text :class="{'active-color': siftCurrentIndex == 1}">{{curr_select_name}}</text>
				<view class="more-icon" :class="{'roate-class': siftCurrentIndex == 1}"><uni-icons type="down" :size="18" color="#333"></uni-icons></view>
			</view>
			<view class="sift-item"  @click="siftClick(2)">
				<text :class="{'active-color': siftCurrentIndex == 2}">{{curr_name}}</text>
				<view class="more-icon" :class="{'roate-class': siftCurrentIndex == 2}"><uni-icons type="down" :size="18" color="#333"></uni-icons></view>
			</view>
		</view>
<!-- 		<scroll-view class="scroll-h" scroll-x="true" :show-scrollbar="false">
			<view class="tab-item " :class="{'tab-active': tabCurrent == tab.id}" v-for="(tab,i) in tab_list" :key="tab.id" @click="tabTap(tab.id)">{{ tab.name }}</view>
		</scroll-view> -->
	</view>
	<view class="clear-float"></view>

	<view class="more-activity" v-if="merchant.data != false">
		<merchant-list v-for="(item, index) in merchant.data" :key="index" :info="item"></merchant-list>
		<uni-load-more v-if="merchant.data.length >= 7" :status="loadStatus"></uni-load-more>
	</view>
	<!-- <empty-status v-else src="/static/images/activity-empty.png"  
		:note="'精彩活动准备中，\n敬请期待.....'" btn_text="我要发起活动"></empty-status> -->
	
	<!-- 筛选遮罩 -->
	<view class="sift-mask" v-if="siftCurrentIndex > 0" @click="siftCurrentIndex=0" @touchmove.stop.prevent="() => {}"></view>
	<!-- 筛选内容-附近-->
	<view class="sift-content-wrapper sift1" :class="{'sift-transform': siftCurrentIndex == 1}">
		<view class="near">
			<view class="title">当前位置</view>
			<view class="near-list">
				<view class="near-item"  :class="curr_near_item==index?'near-item-cur':''"   v-for="(item,index) in near_item_list"   @click="distance(item.val, index)" :key="item.index">{{item.label}}</view>
			</view>
		</view>
		<view class="more-box">
			<view class="title">更多区域</view>
			<view class="more-content">
				<view class="xzq">
					<view class="curr-box" v-if="currentLocate" ></view>
					<view class="item-box" :class="currentLocate!=''? 'curr': '' ">行政区/商区</view>
				</view>
				<scroll-view class="hot"  :show-scrollbar="false" scroll-y="true">
					<view class="item-box">热门商区</view>
					<view class="item-box" v-for="(city, index) in citys"  :key="city.id" @click="getAreaById(city.id, index)" :class="city_cur_index == index ? 'curr' :''   ">{{city.name}}</view>
				</scroll-view>
				<scroll-view class="q-box"  :show-scrollbar="false" scroll-y="true">
					<view class="item-box" v-for="(area, index) in areas"  :key="area.id" @click="selectAreaById(area.id, index)" :class="area_cur_index == index ? 'curr' :''   ">{{area.name}}</view>
				</scroll-view>
			</view>
		</view>
	</view>
	<!-- 筛选内容-活动类型-->
	<view class="sift-content-wrapper sift2" :class="{'sift-transform': siftCurrentIndex == 2}">
		<view class="category-title" >门店品类</view>
		<view class="category-list" v-for="(tab,i) in tab_list" @click="tabTap(tab.type_id, tab.name)" :key="tab.type_id" :class="{'curr-category': tab.type_id == curr_type_id}" >{{ tab.name }}</view>
		<!-- <view class="tab-item " :class="{'tab-active': tabCurrent == tab.id}" v-for="(tab,i) in tab_list" :key="tab.id" @click="tabTap(tab.id)">{{ tab.name }}</view> -->
	</view>
	<footer-menu></footer-menu>
</template>

<script>
	export default {
		data() {
			return {
				curr_name: "全部品类",
				curr_type_id: 0, // 当前tab
				tab_list: [{name: '全部品类', type_id: 0},{name: '咖啡店', type_id: 1},{name: '饮品店', type_id: 2},{name: '酒吧', type_id: 3},{name: '餐厅', type_id: 4},{name: '其他', type_id: 5}],
				merchant: {
					data: [],
					page: 1,
					hasMore: false
				},
				loadStatus: 'more',
				siftCurrentIndex: 0, // 筛选控制
				currentLocate:'',
				lng:0,
				lat:0,
				dis:0,//距离
				near_item_list:[{'label':'附近','val':0}, {'label':'500m','val':500},{'label':'1km','val':1000},{'label':'2km','val':2000}, {'label':'5km','val':5000}],
				curr_near_item:0,
				citys:[],
				areas:[],
				city_cur_index:'',
				area_cur_index: '',
				select_type:0,
				select_city:0,
				select_area:0,
				province_id:0,
				curr_select_name:'附近',
			}
		},
		onPullDownRefresh() {
			this.getMerchantList(true);
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad() {
			//this.getMerchantList();
			this.currentLocate = uni.getStorageSync('currentLocate');
		},
		watch: {
		  currentLocate(newVal) {
			  this.getCityByName(newVal);
			  this.areas = [];
		  }
		},
		onShow() {
			this.currentLocate = uni.getStorageSync('currentLocate')
		},
		computed: {
			headerHeight() {
				return uni.getWindowInfo().statusBarHeight  + uni.rpx2px(112) + 'px'
			},
			headerHeight1() {
				return uni.getWindowInfo().statusBarHeight + 44  + uni.rpx2px(112) + 'px'
			}
		},
		onReachBottom() {
			if (this.merchant.hasMore) {
				this.loadStatus = 'loading'
				this.merchant.page += 1
				this.getMerchantList()
			} else {
				this.loadStatus = 'noMore'
			}
		},
		methods: {
			goHome(){
				uni.switchTab({
					url: '/pages/index/index',
				  })
			},
			tabTap(id, name ) {
				this.curr_type_id = id;
				this.curr_name = name;
				this.siftClick(2);
				this.getMerchantList(true);
			},
			// 筛选点击事件
			siftClick(index) {
				if (this.siftCurrentIndex == index) {
					this.siftCurrentIndex = 0
					return
				}
				this.siftCurrentIndex = index
			},
			async getMerchantList(refresh = false) {
				var userLocation = uni.getStorageSync('userLocation');
				if (userLocation) {
					userLocation = userLocation.split(',');
					this.lng = userLocation[0];
					this.lat = userLocation[1];
				}
				const name = this.dataName
				const res = await this.$request.get('/api/merchant/lists', {
					type: this.curr_type_id, 
					page: this.merchant.page,
					lng: this.lng,
					lat: this.lat,
					dis: this.dis,
					is_show: 1,
					city_type:this.select_type,
					province_id:this.province_id,
					area_id:this.select_area,
					city_id:this.select_city,
				}, {load: false})
				this.loadStatus = 'more'
				if (res.code == 200) {
					const lists = res.data?.lists || []
					this.merchant.hasMore = res.data.has_more_page
					if (refresh) {
						this.merchant.data = lists
						this.merchant.page = 1
					} else {
						this.merchant.data = this.merchant.data.concat(lists)
					}
				}
			},
			async getCityByName(name) {
				const res = await this.$request.get('/api/city/list_by_name', {
					name: name, 
				})
				if (res.code == 200) {
					var citys  = [{"name":"全城","id":-1}]
					if (res.data) { 
						this.select_type = res.data.type;
						this.province_id = res.data.province_id;
						citys = citys.concat(res.data.lists);
					}
					this.citys = citys;
				}
				this.getMerchantList(true);
				this.select_city = 0;
				this.city_cur_index = -1;
			},
			async getAreaById(id,index) {
				this.select_city =  id == -1 ? 0 : id;
				const res = await this.$request.get('/api/city/list_by_id', {
					id: id, 
				})
				this.city_cur_index = index
				if (res.code == 200) {
					var areas  = [{"name":"全区","id":-1}]
					if (res.data) {
						areas = areas.concat(res.data)
					}
					this.areas = areas;
				}
				this.select_area = 0;
				this.area_cur_index = -1;
				this.dis = 0;
				this.curr_select_name = this.citys[index].name;
				this.siftClick(1);
				this.getMerchantList(true);
			},
			selectAreaById(id,index) {
				this.select_area = id == -1 ? 0 : id;
				this.area_cur_index = index;
				this.dis = 0;
				this.curr_select_name = this.areas[index].name;
				this.siftClick(1);
				this.getMerchantList(true);
			},
			distance(dis,index){
				//获取当前经纬度
				var that = this;
				that.dis = dis;
				that.curr_near_item = index;
				that.curr_select_name = that.near_item_list[index].label;
				that.select_area = 0;
				that.select_city = 0;
				var userLocation = uni.getStorageSync('userLocation');
				if (userLocation) {
					 userLocation = userLocation.split(',');
					 that.lng = userLocation[0];
					 that.lat = userLocation[1];
					 that.siftClick(1);
					 that.getMerchantList(true);
				 }else{
					 //获取当前定位
					 uni.getLocation({
					 	type: 'wgs84',
					 	geocode:true,//设置该参数为true可直接获取经纬度及城市信息
					 	success: function (res) {
					 		that.lng = res.longitude;
					 		that.lat = res.latitude;
					 		that.siftClick(1);
					 		that.getMerchantList(true);
					 	},
					 	fail: function () {
					 		uni.showToast({
					 			title: '获取地址失败，将导致部分功能不可用',
					 			icon:'none'
					 		});
					 	}
					 });
					 
				 }
			
			},
		}
	}
</script>

<style scoped lang="scss">
	.header-tab {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		background: linear-gradient(to right, #CDE0F8, #C3F0F0, #DFF8F0);
		z-index: 10;
	}
	.left-title {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		
		.city-name {
			max-width: calc(160rpx - 32rpx);
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			line-clamp: 1;
			-webkit-line-clamp: 1;
		}
		.switch-icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 8rpx;
		}
	}
	.sift-wrapper {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		
		.sift-item {
			display: flex;
			align-items: center;
			margin-right: 44rpx;
			font-size: 28rpx;
			font-weight: 500;
			.more-icon {
				margin-left: 8rpx;
				transition: transform 0.3s linear;
			}
			.roate-class {
				transform: rotate(180deg);
			}
			.active-color {
				color: $uni-color-primary;
			}
		}
	}
	.clear-float {
		height: v-bind(headerHeight);
		border-radius:0;
	}
	.sift-mask {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 8;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.sift-content-wrapper {
		position: fixed;
		top: v-bind(headerHeight);
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 0 0 24rpx 24rpx;
		z-index: 9;		
		transform: translateY(-100%);
		transition: transform 0.3s ease;
		// pointer-events: none;
	}
	.sift1 {
		 height: auto;
	}
	.sift2 {
		 height: auto;
		 padding-bottom: 40rpx;
	}
	.sift-transform {
		transform: translateY(0);
	}
	
	.scroll-h {
		white-space: nowrap;
		margin-top: 32rpx;
		padding-bottom: 24rpx;
		&::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		  display: none;
		}
	}
	.tab-item {
		min-width: 180rpx;
		height: 60rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 30rpx;
		background-color: #fff;
		color: rgba(38, 38, 38, 0.60);
		margin-left: 30rpx;
		display: inline-block;
		
		&:last-child {
			margin-right: 30rpx;
		}
	}
	.tab-active {
		background-color: $uni-color-primary;
		color: #fff;
	}
	.more-activity {
		margin-top: 60rpx;
	}
	
   .category-title{
	   z-index: 99;
       margin-top: 44rpx;
	   margin-left: 3%;
	   width: 94%;
	   height: 80rpx;
	   line-height: 80rpx;
	   font-weight: 400;
	   font-size: 26rpx;
	   color: #666666;
	   border-bottom:1px solid #eBeBeB;
   }
   .category-list{
	   z-index: 99;
   	   margin-left: 3%;
   	   width: 94%;
   	   height: 80rpx;
   	   line-height: 80rpx;
   	   font-weight: 400;
   	   font-size: 26rpx;
   	   color: #262626;
   }
   .curr-category{
	   color: #00CAC0 ;
   }
   
   .near{
   	   width:100%;
   	   height: auto;
   	   overflow: hidden;
   	   .title{
   		  width: 104rpx;
   		  height: 32rpx;
   		  font-family: PingFangSC, PingFang SC;
   		  font-weight: 500;
   		  font-size: 26rpx;
   		  color: #262626;
   		  text-align: left;
   		  font-style: normal;
   		  text-transform: none;
   		  margin-left:32rpx;
   		  margin-top:64rpx;
   	   }
   	   .near-list{
   		   width: 700rpx;
   		   height: 64rpx;
   		   margin-left: 32rpx;
   		   margin-top:16rpx;
   		   overflow: hidden;
   		   .near-item{
   			 width: 128rpx;
   			 height: 64rpx;
   			 float: left;
   			 background: #F5F5F5;
   			 border-radius: 82rpx;
   			 margin-right: 12rpx;
   			 text-align: center;
   			 font-weight: 400;
   			 font-size: 26rpx;
   			 color: #262626;
   			 line-height: 64rpx;
   		   }
   		   .near-item-cur{
   			 background: #00CAC0; 
   			 font-weight: 500;
   			 font-size: 26rpx;
   			 color: #FFFFFF;
   		   }
   	   }
   }
   
   .more-box{
   	   width:100%;
   	   height: auto;
   	   overflow: hidden;
   	   .title{
   			width: 104rpx;
   			height: 32rpx;
   			font-family: PingFangSC, PingFang SC;
   			font-weight: 500;
   			font-size: 26rpx;
   			color: #262626;
   			text-align: left;
   			font-style: normal;
   			text-transform: none;
   			margin-left: 32rpx;
   			margin-top:24rpx;
   			margin-bottom: 16rpx;
   	   }
   	   .more-content{
   		   width:100%;
   		   height: auto;
   		   overflow: hidden;
   		   .curr-item{
   			  background: #F5F5F5;
   			  color: #00CAC0 !important;
   		   }
   		   .xzq{
   			   width: 208rpx;
   			   height: auto;
   			   background: #fff;
   			   float: left;
   			   overflow: hidden;
   			   .curr-box{
   				  width: 8rpx;
   				   height:32rpx;
   				   background-color: #00CAC0;
   				   float: left;
   				   margin-top: 20rpx;
   			   }
   			   .item-box{
   				   background: #fff;
   				   height:72rpx;
   				   line-height: 72rpx;
   				   font-weight: 400;
   				   font-size: 26rpx;
   				   color: #262626;
   				   text-align: left;
   				   padding-left: 32rpx;
   				   font-style: normal;
   				   text-transform: none;
   			   }
   			   .curr{
   				  background: #F9F9F9; 
   				  color: #00CAC0 !important;
   			   }
   		   }
   		   .hot{
   			  width: 208rpx;
   			  height: 432rpx;
   			  background: #F9F9F9;
   			  float: left;
   			  .item-box{
   				   padding-left: 32rpx;
   				   height:72rpx;
   				   line-height: 72rpx;
   				   font-weight: 400;
   				   font-size: 26rpx;
   				   color: #262626;
   				   text-align: left;
   				   font-style: normal;
   				   text-transform: none;
   			  }
   			  .curr{
   				  background: #F5F5F5; 
   				  color: #00CAC0 !important;
   			  }
   		   }
   		   .q-box{
   			  width: 334rpx;
   			  height: 432rpx;
   			  background: #F5F5F5;
   			  float: left;
   			  .item-box{
   				   padding-left: 32rpx;
   				   height:72rpx;
   				   line-height: 72rpx;
   				   font-weight: 400;
   				   font-size: 26rpx;
   				   color: #262626;
   				   text-align: left;
   				   font-style: normal;
   				   text-transform: none;
   			  }
   			  .curr{
   				  color: #00CAC0 !important;
   			  }
   		   }
   	   }
   }
</style>